{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>在线记录你的灵感</title>
    {#    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css">#}
    {#    <link rel="stylesheet" href="{%static 'layui/css/layui.css' %}">#}
    <link rel="stylesheet" href="{% static '/layui/css/layui.css' %}">
    {# 静态加载的方式 #}
</head>
<script src="{% static '/layui/layui.js' %}"></script>
<script>
    layui.use(['layer', 'form'], function () {
        var layer = layui.layer
            , form = layui.form;

        layer.msg('我的灵感');
    });
</script>

<style>
    .div-three_mesg {
        display: inline
    }
</style>

<ul class="layui-nav" lay-filter="">
    <li class="layui-nav-item "><a href="{% url 'index' %}">灵感广场</a></li>
    <li class="layui-nav-item layui-this"><a href="{% url 'mysparks' %}?user_id={{ request.session.user_id }}">我的灵感</a></li>
    <li class="layui-nav-item" >
        <a href="javascript:;"><i class="layui-icon layui-icon-user" ></i></a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
              <dd><a href="{% url 'login' %}">登陆</a></dd>
              <dd><a href="{% url 'logout' %}">退出</a></dd>
            </dl>
    </li>
</ul>

<body bgcolor="#f0f0f4">
<ul>

    {% for card in mysparks_list %}
        <div class="layui-main layui-card" >
            <div class="layui-card-header"><a href={% url 'sparkdetail'  card.id %}> {{ card.title }}</a></div>
            <div class="layui-card-body layui-anim layui-anim-fadein">
                <p>{{ now }}</p>
                <p class="layui-text">{{ card.spark_content }}</p>
                <div class="div-three_mesg layui-icon layui-icon-praise"></div>
                <div class="div-three_mesg  layui-font-14 layui-font-orange ">{{ card.like }}</div>
                <div class="div-three_mesg layui-icon layui-icon-dialogue"></div>
                <div class="div-three_mesg  layui-font-14 layui-font-orange ">评论</div>
                <div class="div-three_mesg layui-icon layui-icon-username"><a href="#" class="layui-font-orange">{{ card.owner.user_name }}</a></div>
                  <div class="div-three_mesg layui-icon layui-icon-time layui-font-gray">  {{ card.created_time }}
                </div>
            </div>
        </div>
{#        <hr>#}
    {% endfor %}

    {#    <div class="pagination">#}
    <span class="step-links" style="text-align: center;display:block;">
            {% if page_obj.has_previous %}
                {#            <a href="?page=1">第一页</a>#}
                <a href="{% url 'mysparks' %}?user_id={{ request.session.user_id }}&page={{ page_obj.previous_page_number }}">前一页</a>
            {% endif %}

        <span class="current">
                {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
            </span>

        {% if page_obj.has_next %}
            <a href="{% url 'mysparks' %}?user_id={{ request.session.user_id }}&page={{ page_obj.next_page_number }}">下一页</a>
        {% endif %}
        </span>
    {#    </div>#}
</ul>
</body>
</html>